<template>
  <div id="root">
    <div class="title"><span>选择贴纸</span></div>
    <div class="description">选择一个你喜欢的贴纸吧！</div>
    <div id="imgBox">
      <ul class="imgUl">
        <li v-for="(url, index) in stickerList" :key="index">
          <img :src="url" @click="addImgLayers(url)" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'sticker',
  created () {},
  data () {
    return {
      stickerList: ['../../../static/sticker/test1.png', '../../../static/sticker/test2.png', '../../../static/sticker/3.jpg', '../../../static/sticker/4.jpg', '../../../static/sticker/5.png', '../../../static/sticker/6.jpg', '../../../static/sticker/7.jpg', '../../../static/sticker/8.png', '../../../static/sticker/9.jpg', '../../../static/sticker/10.jpg', '../../../static/sticker/11.png', '../../../static/sticker/12.jpg', '../../../static/sticker/13.png', '../../../static/sticker/14.png']
    }
  },
  props: [],
  methods: {
    // 向画布添加素材
    addImgLayers (url) {
      this.$store.state.canvasData.addLayer('image', url)
    }
  }
}
</script>

<style scoped>
#root {
  /* margin: 2px 0 0 2px; */
  /* border: 1px solid #d6d7de; */
  width: 23.86vw;
  height: 85vh;
}
.title {
  width: 18vw;
  height: 4.4vh;
  background-color: #f5c2ca;
  border-radius: 1vh;
  margin: 0 auto;
  margin-top: 3.15vh;
  display: flex;
  justify-content: center;
}
.title > span {
  align-self: center;
}
.description {
  text-align: center;
  font-size: 0.57vw;
  color: #767676;
}

/* 贴纸样式开始 */
#imgBox {
  width: 23.86vw;
  height: 83vh;
  margin-top: 0.633vh;
  border-top: 1px solid #d6d7de;
  overflow-y: scroll;
}
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.imgUl {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
.imgUl > li {
  width: 5.76vw;
  height: 5.76vw;
  list-style: none;
  margin-left: 1.55vw;
  margin-top: 3.16vh;
  position: relative;
}
.imgUl > li > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 贴纸样式结束 */
</style>
